import { useRef, useEffect } from "react"
import * as echarts from "echarts"

const BarChart = ({ xData, sData, style = { width: "400px", height: "300px" }}) => {
    const chartRef = useRef(null)
    useEffect(() => {
        const chart = echarts.init(chartRef.current)
        chart.setOption({
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: sData,
                    type: 'bar'
                }
            ]
        })
    }, [sData,xData])
    return <div ref={chartRef} style={style}></div>
}

export default BarChart